<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>请假详细信息</title>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
</head>
<body>

<div id="app">
<h1>修改请假</h1>
	<div>
	请假类型：
	<select v-model="type">
		<option v-for="item in type_datas" :key="item.id" :value='item.id'>{{item.text}}</option>
	</select>
	</div>
	<div>
	开始日期：<input type="date" v-model="start_date">
	</div>
	<div>
	结束日期：<input type="date" v-model="end_date">
	</div>
	<div>
	请假事由：<textarea v-model="reason" style="width: 250px;height: 80px;"></textarea>
	
	</div>
	<div>请假人：<span>{{leave_name}}</span></div>
	<input type="button" @click="modify()" value="修改">
	<div style="color:red;">{{msg}}</div>

</div>
<script>
var app = new Vue({
    el: '#app', //el是element缩写
    data: { //数据
    	reason:"", // 设置表单控件的默认值
    	type:"-1", // 设置表单控件的默认值
    	start_date:"", // 设置表单控件的默认值
    	end_date:"", // 设置表单控件的默认值
    	leave_name:"", // 请假人
    	type_datas:[
   	            {id:"-1",text:"请选择"},
   	            {id:"1",text:"事假"},
   	            {id:"2",text:"病假"},
   	            {id:"3",text:"产假"},
   	            {id:"4",text:"婚假"}
   	        ],
   	    msg:""
    },
   	methods:{
   		modify:function(){
   			console.log("点击了修改按钮！")
   		//console.log("请假类型：",type) // 错误，需要通过this访问， 相当于java代码，通过this访问成员变量
    		console.log("请假类型：",this.type) // 相当于java代码，通过this访问成员变量
    		console.log("开始时间：",this.start_date)
    		console.log("结束时间：",this.end_date)
    		console.log("请假原由：",this.reason)
    		//非空校验
    		if( this.type === "-1"){
    			this.msg="请选择请假类型！"
    			return
    		}
    		if( this.start_date === ""){
    			this.msg="请填写开始时间！"
    			return
    		}
    		if( this.end_date === ""){
    			this.msg="请填写结束时间！"
    			return
    		}
    		if( this.reason === ""){
    			this.msg="请填写请假事由！"
    			return
    		}
    		this.msg=""
    		
    		//调用axios发请求，需要通过post方法
    		//axios中，通过post传参数，需要通过下面对象
    		let params = new URLSearchParams();
    		params.append("type", this.type);
    		params.append("startDate", this.start_date)
    		params.append("endDate", this.end_date)
    		params.append("reason", this.reason)
    		
    		//因为是修改功能，根据id来进行修改
    		var id=getQueryVariable("id")
    		params.append("id",id )
    		
    		//注意要修改url，复制过来的代码是向添加 servlet发请求
    		axios.post('modifyById', params)
    		  .then(function (res) {
    		    console.log(res);
    		    if(res.data.code===0){
    		    	alert("修改成功！");
    		    	location.href="list.html"
    		    }
    		  })
    		  .catch(function (error) {// 请求失败处理
    		    console.log(error);
    		  });
   			
   		}
   	},
    mounted:function(){// 加载vue成功，显示数据之前，执行这个函数
    	console.log("vue的mounted钩子函数")
    	var id=getQueryVariable("id")
    	console.log("id=",id)
    	var that = this
    	//通过axios发送请求，根据id获取请假的详细信息
    	axios.get('showById?id='+id, {
        })
        .then(function (res) {
            console.log(res.data);
	        if(res.data.code===0){
	        	//将返回结果赋值给 vue 的 leave_name
	        	that.leave_name=res.data.data.applicant
	        	that.type=res.data.data.type
	        	that.start_date=res.data.data.startDate
	        	that.end_date=res.data.data.endDate
	        	that.reason=res.data.data.reason
	        }else if(res.data.code === 100){
	        	alert("数据不存在！")
	        }
        })
        .catch(function (error) {// 请求失败处理
            console.log(error);
    });
    	
    }
})

function getQueryVariable(variable){
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}



</script>
</body>
</html>